<template>
  <view class="nav">
    <view :style="'height:' + status + 'rpx;' + containStyle" ></view>
    <view class="navbar" :style="'height:' + navHeight + 'rpx;' + containStyle">
      <view class="back-icon" @click="backHome">
        <image v-if="pages > 1" src="../../static/resource/navbar/ic_back.png"></image>
        <image v-else src="../../static/resource/navbar/ic_home.png"></image>
      </view>
      <view class="nav-title" v-if="titleText">
        <view :style="'height:' + navHeight + 'rep; lineheight' + navHeight + 'rpx' + textStyle "> {{ titleText}}</view>
      </view>
    </view>
    
  </view>
</template>

<script setup>
  import { ref, onBeforeMount, defineProps} from 'vue'
  const props = defineProps({
    background: {
      type: String,
      default: 'rgba(255,255,255,1)'
    },
    color: {
      type: String,
      default: 'rgba(0,0,0,1)'
    },
    fontSize: {
      type: String,
      default: 32
    },
    iconWidth: {
      type: String,
      default: 116
    },
    iconHeight: {
      type: String,
      default: 36
    },
    titleText: {
      type: String,
      default: ''
    }
  })
  onBeforeMount(()=>{
    setNavSize(),
    setStyle()
  })
 // 状态栏高度
  const status = ref(0)
 // 内容高度
  const navHeight = ref(0)
 // 背景颜色 
  const containStyle = ref('')
 // 字体样式
  const textStyle = ref('') 
 // 图标样式
  const iconStyle = ref('')
 // 页面站的数量
  const pages = ref(getCurrentPages().length)
  console.log(pages.value, 'page')
 // 计算状态栏高度
 const setNavSize = () => {
   const  { system, statusBarHeight} = uni.getSystemInfoSync()
   status.value = statusBarHeight * 2
   const isiOS = system.indexOf('iOS') > -1 
   if(!isiOS){
     navHeight.value = 98 
   } else {
     navHeight.value = 88
   }
 }
  // 样式设置
  const setStyle = () => {
    containStyle.value = ['background:' + props.background].join(';')
    textStyle.value = ['color:' + props.color, 'fontSize:' + props.fontSize + 'rpx'].join(';')
    iconStyle.value = ['iconWidth:' + props.iconWidth + 'rpx', 'iconHeight:'+ props.iconHeight + 'rpx'].join(';')
  }
  const backHome = () => {
    if (pages.value > 1 ) {
      uni.navigateBack()
    } else {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  }
</script>

<style>
  .nav {
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    z-index: 0;
  }
  .back-icon {
    display: flex;
    align-items: center;
    width: 64rpx;
    height: 100%;
  }
  .back-icon image {
    width: 64rpx;
    height: 64rpx;
  }
  .navbar {
    position: relative;
  }
  .nav-title {
    position: absolute;
    top: 15rpx;
    left: 50%;
    transform: translate(-50%);
  }
</style>